window.addEventListener('load', async function () {
  const res = await axios({ url: '/dashboard' })
  console.log(res);
  const {year,salaryData,groupData} = res.data
  for (let key in res.data.overview) {
    console.log(`[name= "${key}"]`);
    document.querySelector(`[name = "${key}"]`).innerHTML = res.data.overview[key];
  }

   //全学科薪资走势
  renderSubject(year)
  //班级薪资
  renderClass(salaryData)
  //班级每组薪资
  renderClassSalary(groupData)
  //男女薪资分布
  renderPersonSalary(salaryData)
  //籍贯分布
  renderProvince()
}) 
 

function renderSubject(arr) {
      var myChart = echarts.init(document.getElementById('line'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '2022全学科薪资走势',
          top: '15',
          left: '10',
          textStyle: {
            color: 'dimgray',
            fontSize: 18,
          }
        },
        xAxis: {
          type: 'category',
          data: arr.map(item => item.month),
         axisLine: {
           lineStyle:{
             type: 'dashed',
             color:'skyblue',
           }
         },
        axisLabel: {
          color: '#000'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle :{
              type : 'dashed',
              color: 'skyblue'
            }
          }
        },
        series: [
          {
            data: arr.map(item => item.salary),
            type: 'line',
            smooth: true,
            lineStyle : {
              width :6,
              color: '#5f8eff'
            },
            symbolSize: 10,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#c8e2ff'//0% 处的颜色
                }, {
                  offset: 0.9, color: '#fff' //100% 处的颜色
                 
                  }],
                global: false //缺省为false
              }
            }

          }
        ]
  };
  
  myChart.setOption(option);
} 

function renderClass(arr) {
  var myChart = echarts.init(document.getElementById('salary'));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '班级薪资',
      top: '15',
      left: '10',
      textStyle: {
        color: 'black',
        fontSize: 18,
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
     bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: arr.map(item => ({
          value: item.g_count + item.b_count,
          name: item.label
        }))
      }
    ],
    color: ['red','blue','pink','green','yellow']
  };

  myChart.setOption(option);
  
} 

function renderClassSalary(arr) {
  var myChart = echarts.init(document.getElementById('lines'));

  // 指定图表的配置项和数据
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      },
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ],
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#3ad39c' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#e4fefc' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#55b1ff' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#e4fefc' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    ]
  };

  //使用刚指定的配置和数据显示图表
  myChart.setOption(option);
  
  //渲染标题列表
  let titleStr = ''
  for (let key in arr) {
    titleStr += `<button type="button" class="btn btn-xs btn-blue">${key}</button>`
  }
  document.querySelector('#btns').innerHTML = titleStr

  //排他思想 点击切换
  const btnList = document.querySelectorAll('#btns button')
  btnList.forEach(btn => {
    btn.addEventListener('click', function () {
      for (let i = 0; i < btnList.length; i++) {
        btnList[i].classList.remove('btn-blue')
      }
      this.classList.add('btn-blue')

      const index = this.innerHTML

      //echarts数据有变化，我们可以通过setOption来重绘图表
      myChart.setOption({
        xAxis: {
          data: arr[index].map(item => item.name)
        },
        series: [
          {
            type: 'bar',
            data: arr[index].map(item => item.hope_salary),
          },
          {
            type: 'bar',
            data: arr[index].map(item => item.salary),
          }
        ]
      })

    })
  })
  btnList[0].click() //模拟点击

} 

function renderPersonSalary(arr) {
  var myChart = echarts.init(document.getElementById('gender'));

  // 指定图表的配置项和数据
  var option = {
    title: [
      {
      text: '男女薪资分布',
      left: '15',
      top: '20'
      },
      {
        text: '男生',
        left: '50%',
        top:'44%',
        textAlign:'center',
      },
      {
        text: '女生',
        left: '50%',
        top:'88%',
        textAlign:'center',
      },
    ],
    tooltip: {
      trigger: 'item'
    },
    
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['20%','30%'],
        data: arr.map(item => ({
          value: item.g_count,
          name: item.label
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        center:['50%','30%'],
      },
       {
        name: 'Access From',
        type: 'pie',
        radius: ['20%','30%'],
        data: arr.map(item => ({
          value: item.b_count,
          name: item.label
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        center:['50%','75%'],
      }
    ]
  };

  myChart.setOption(option);
  
} 

function renderProvince() {
  var myChart = echarts.init(document.getElementById('map'));
  /* 
请勿在原图上直接修改保存
*/
function mapTooltipClick(name) {
  alert(name)
}

function tooltipCharts() {
  console.log(arguments[0]);
  var myChart1 = echarts.init(document.getElementById('tooltipBarId'));
  var option = {
      tooltip: {},
      dataset: {
          source: [
              ['xAxis', '201701', '201702', '201703', '201704', '201705', '201706', '201707', '201708', '201709', '20170', '201710', '20170', '201801'],
              ['amount', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1, 53.3, 83.8]
          ]
      },
      xAxis: {
          type: 'category',
          interval: true,
          axisLabel: {
              rotate: 45
          },
          axisTick: {
              show: false
          }
      },
      yAxis: {},
      color: ['#4FA8F9', '#F5A623'],
      grid: {
          show: true,
          backgroundColor: '#FAFAFA',
          left: 30,
          right: 20,
          top: 20
      },
      series: [{
          type: 'bar',
          smooth: true,
          seriesLayoutBy: 'row',
          barWidth: 10
      }]
  };
  myChart1.setOption(option);
}
let option = {
  visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: false,
      orient: 'horizontal',
      inRange: {
          color: ['#e0ffff', '#006edd'],
          symbolSize: [30, 100]
      }
  },
  tooltip: {
      padding:8,
      enterable: true,
      transitionDuration: 1,
      textStyle: {
          color: '#fff',
          decoration: 'none',
      }
  },
  series: [{
      name: '接入医院数量',
      type: 'map',
      mapType: 'china',
      itemStyle: {
          normal: {
              label: {
                  show: false
              }
          },
          emphasis: {
              label: {
                  show: true
              }
          }
      },
      label: {
    normal: { //静态的时候展示样式
      show: true, //是否显示地图省份得名称
      textStyle: {
        color: "#fff",
        fontSize: 12
      }
    },
    emphasis: { //动态展示的样式
      color: '#fff',
    },
  },
      data: [{
              name: '北京',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '天津',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '上海',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '重庆',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '河北',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '河南',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '云南',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '辽宁',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '黑龙江',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '湖南',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '安徽',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '山东',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '新疆',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '江苏',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '浙江',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '江西',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '湖北',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '广西',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '甘肃',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '山西',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '内蒙古',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '陕西',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '吉林',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '福建',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '贵州',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '广东',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '青海',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '西藏',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '四川',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '宁夏',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '海南',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '台湾',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '香港',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
              name: '澳门',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
      ]
  }, ]
}
var count = 0;
var timeTicket = null;
var dataLength = option.series[0].data.length;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
  myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
  });
  myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: (count) % dataLength
  });
  myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: (count) % dataLength
  });
  count++;
}, 1000);

myChart.on('mouseover', function(params) {
  console.log(params)
  clearInterval(timeTicket);
  myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
  });
  myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex
  });
  myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: params.dataIndex,
  });
});
myChart.on('mouseout', function(params) {
  timeTicket && clearInterval(timeTicket);
  timeTicket = setInterval(function() {
      myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
      });
      myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: (count) % dataLength
      });
      myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: (count) % dataLength
      });
      count++;
  }, 1000);
});
  
  myChart.setOption(option);
}
